@layout("/common/_container.html"){
<style>
    ul {
        padding: 0;
    }

    .nav_ul {
        border-bottom: 5px solid #30add2;
    }

    .nav_ul > li > a {
        color: #565656;
        border: 1px solid #dddddd;
    }

    .nav_table {
        margin-top: 10px;
    }

    .doctor_ul > li {
        float: left;
        margin-right: 20px;
    }

    .ul_flex {
        display: flex;
        padding: 0;
    }

    .ul_flex > li {
        flex: 1;
    }

    .ul_flex ul {
        padding: 0;
    }

    .ul_flex ul > li {
        line-height: 52px;
    }

    .ul_flex span {
        display: inline-block;
        width: 110px;
    }

    .home_box {
        border: 1px solid #cccccc;
        border-radius: 5px;
        overflow: hidden;
        padding-bottom: 30px;
    }

    .btnBox {
        padding: 15px 0px 5px;
    }

    .btnBox button {
        background: #30add1;
        color: white;
        width: 96px;
    }

    .modify {
        height: 35px;
        border: none;
        width: 60%;
        border-radius: 3px;
        padding-left: 10px;
    }

    .modify1 {
        height: 35px;
        border: none;
        width: 60%;
        border-radius: 3px;
        padding-left: 10px;
    }

    .select_styles {
        width: 60%;
        height: 35px;
        border-radius: 3px;
        border: none;
        padding-left: 10px;
        -webkit-appearance: none;
    }

    .select_styles1 {
        width: 60%;
        height: 35px;
        border-radius: 3px;
        border: none;
        padding-left: 10px;
        -webkit-appearance: none;
    }

    #select1 {
        border: none;
        -webkit-appearance: none;
    }
    #bubble{
        width:50%;
        margin-left:7%;
    }
    .input_style{
        width: 50%;
        height: 39px;
        border: 1px solid #cccccc;
        border-radius: 3px;
        margin-left:10px;
    }
    .btn_box button{
        background:#30add1;
        color: white;
        width: 80px;
        font-weight: bold;
    }
    .ul_box>li{
        flex: 1;
    }

    .nav-tabs > li.active > a,
    .nav-tabs > li.active > a:hover,
    .nav-tabs > li.active > a:focus {
        background: #30add2;
        border-bottom: 1px solid #30add2;
        color: white;
    }
</style>
<div class="ibox float-e-margins ">
    <div class="ibox-content">
        <div style="display: none">
            <input type="hidden" id="id" value="${reservationsInfo.id}">
            <input id="economicAbilityValue" type="hidden" name="经济能力"
                   value="${reservationsInfo.economicAbility}"/>
            <input id="occupationValue" type="hidden" name="职业"
                   value="${reservationsInfo.occupation}"/>
            <input type="hidden" id="customerSexValue" value="${reservationsInfo.customerSex}">
            <input type="hidden" id="isLargeValue" value="${reservationsInfo.isLarge}">
            <input type="hidden" id="oneMediumValue" value="${reservationsInfo.oneMedium}">
            <input type="hidden" id="twoMediumValue" value="${reservationsInfo.twoMedium}">
            <input type="hidden" id="thrMediumValue" value="${reservationsInfo.thrMedium}">
            <input type="hidden" id="oneChannelValue" value="${reservationsInfo.oneChannel}">
            <input type="hidden" id="twoChannelValue" value="${reservationsInfo.twoChannel}">
            <input type="hidden" id="thrChannelValue" value="${reservationsInfo.thrChannel}">
            <input type="hidden" id="outpatientNameValue" value="${reservationsInfo.outpatientName}">
            <input type="hidden" id="statusValue" value="${reservationsInfo.status}">
            <input type="hidden" id="payservicenameValue" value="${reservationsInfo.appointmentPayService}">
            <input type="hidden" id="phoneSharShipValue" value="${reservationsInfo.phoneSharShip}">
            <input type="hidden" id="accessDiseaseValue" value="${reservationsInfo.accessDisease}">
            <input type="hidden" id="maritalStatus" value="${reservationsInfo.maritalStatus}">
            <input type="hidden" id="reservationsId" value="${reservationsInfo.id}">
            <input type="hidden" id="huifang" value="${reservationsInfo.huifang}">
            <input type="hidden" id="follower" value="">
            <input type="hidden" id="sortMap" value="">
        </div>
        <div class="row" style="background: #f7f7f7;border: 1px solid #dddddd;border-radius: 3px;">
            <p style="margin-top: 25px;">
                <span style="margin-left: 10px;font-size: 2em;font-weight: bolder;">${reservationsInfo.customerName}</span>
                <span style="margin-left: 3%;">${reservationsInfo.customerAge}岁</span>
                <span style="margin-left: 1%"><select id="select1" name="customerSex">
                            <option value="1">男</option>
                            <option value="2">女</option>
                        </select></span>
                <span style="margin-left: 6%;">电话：${reservationsInfo.customerPhone}</span>
                <span style="margin-left: 3%">病历号：${reservationsInfo.reservationsNum}</span>
            </p>
        </div>
        <div class="row">
            <div class="nav_table" id="reservationsInfoForm">
                <!-- Nav tabs -->
                <ul class="nav nav-tabs nav_ul" role="tablist" id="navBox">
                    <!--建档-->
                    <li role="presentation" class="active onRecord"><a href="#home" aria-controls="home" role="tab"
                                                                       data-toggle="tab">患者信息</a></li>
                    <!--已到-->
                    <li role="presentation"><a href="#doctor" class="arrived" aria-controls="doctor" role="tab"
                                               data-toggle="tab">看诊记录</a></li>
                    <li role="presentation"><a href="#deal" class="arrived" aria-controls="deal" role="tab"
                                               data-toggle="tab">成交记录</a></li>
                    <li role="presentation"><a href="#returnVisit" class="notReached" aria-controls="returnVisit"
                                               role="tab" data-toggle="tab">回访记录</a></li>
                </ul>
                <!-- Tab panes -->
                <div class="tab-content content_box" id="contentBox">
                    <!--建档 客户详情-->
                    <div role="tabpanel" class="tab-pane active onRecord" id="home">
                        <div class="clearfix btnBox">
                            <div style="float: left;">
                                @if(shiro.hasPermission("/reservations/supplement")){
                                <button type="button" class="btn" onclick="ReservationsInfoDlg.supplement()">补单</button>
                                @}
                                <button type="button" class="btn" onclick="ReservationsInfoDlg.close()">取消</button>
                            </div>
                        </div>
                        <div class="home_box">
                            <div style="padding: 10px;overflow: hidden;">
                                <div class="col-sm-12" style="border-bottom: 1px solid #cccccc"><h4>个人信息</h4></div>
                                <div class="col-sm-12">
                                    <ul class="ul_flex col-sm-8">
                                        <li>
                                            <ul>
                                                <li><span>预约号：</span><input type="text" class="modify"
                                                                            id="reservationsNum"
                                                                            value="${reservationsInfo.reservationsNum}">
                                                </li>
                                                <li><span>姓名：</span><input type="text" class="modify" id="customerName"
                                                                           value="${reservationsInfo.customerName}">
                                                </li>
                                                <li><span>年龄：</span><input type="text" class="modify" id="customerAge"
                                                                           value="${reservationsInfo.customerAge}"></li>
                                                <li><span>电话：</span><input type="text" class="modify" id="customerPhone"
                                                                           value="${reservationsInfo.customerPhone}">
                                                </li>
                                                <li><span>电话使用人：</span><select class="select_styles"
                                                                               name="phoneSharShip" id="phoneSharShip">
                                                    <option value="本人">本人</option>
                                                    <option value="爸爸">爸爸</option>
                                                    <option value="妈妈">妈妈</option>
                                                    <option value="儿子">儿子</option>
                                                    <option value="女儿">女儿</option>
                                                    <option value="朋友">朋友</option>
                                                    <option value="其他">其他</option>
                                                </select></li><!--找不到-->
                                            </ul>
                                        </li>
                                        <li>
                                            <ul>
                                                <li><span>性别：</span><select class="select_styles" name="customerSex"
                                                                            id="customerSex">
                                                    <option value="1">男</option>
                                                    <option value="2">女</option>
                                                </select></li>
                                                <li><span>状态：</span><select class="select_styles" name="statuss"
                                                                            id="status.s">
                                                    <option value="预约">预约</option>
                                                    <option value="待定">待定</option>
                                                    <option value="跟进">跟进</option>
                                                    <option value="过期">过期</option>
                                                </select></li>
                                                <li><span>QQ号：</span><input type="text" class="modify" id="qqNumber"
                                                                            value="${reservationsInfo.qqNumber}"></li>
                                                <li><span>微信号：</span><input type="text" class="modify" id="wechatNumber"
                                                                            value="${reservationsInfo.wechatNumber}">
                                                </li>
                                                <li id="phone2" hidden="hidden">
                                                    <span>电话2：</span><input type="text" class="modify1" id="customerPhone2">
                                                </li>
                                                <li>
                                                    <span>关键词：</span><input type="text" class="modify1" id="keyWord"
                                                                            value="${reservationsInfo.keyWord}">
                                                </li>
                                            </ul>
                                        </li>
                                    </ul>
                                    <div class="col-sm-4"></div>
                                </div>
                            </div>
                            <div style="padding: 10px;overflow: hidden;">
                                <div class="col-sm-12" style="border-bottom: 1px solid #cccccc"><h4>项目信息</h4></div>
                                <div class="col-sm-12">
                                    <ul class="ul_flex">
                                        <li>
                                            <ul>
                                                <li><span>访问病种：</span><select class="select_styles" name="accessDisease"
                                                                              id="accessDisease">
                                                    <option value="">请选择</option>
                                                    <option value="种植">种植</option>
                                                    <option value="正畸">正畸</option>
                                                    <option value="修复">修复</option>
                                                    <option value="美白">美白</option>
                                                    <option value="拔牙智齿">拔牙智齿</option>
                                                    <option value="牙周">牙周</option>
                                                    <option value="洗牙洁牙">洗牙洁牙</option>
                                                    <option value="医院类">医院类</option>
                                                    <option value="儿童齿科">儿童齿科</option>
                                                </select></li>
                                                <li><span>预约门诊：</span><select class="select_styles"
                                                                              name="outpatientName"
                                                                              id="outpatientName"></select></li>
                                                <li><span>是否大单：</span><select class="select_styles" name="isLarge"
                                                                              id="isLarge">
                                                    <option value="1">是</option>
                                                    <option value="2">否</option>
                                                </select></li>
                                                <li><span>一级渠道：</span><select class="select_styles1" name="oneChannel"
                                                                              id="oneChannel"></select></li>
                                                <li><span>一级媒介：</span><select class="select_styles" name="oneMedium"
                                                                              id="oneMedium"></select></li>
                                            </ul>
                                        </li>
                                        <li>
                                            <ul>
                                                <li><span>预约项目：</span><select class="select_styles"
                                                                              name="appointmentPayService"
                                                                              id="appointmentPayService"></select></li>
                                                <li><span>建档人：</span><input type="text" class="modify1"
                                                                            readonly="readonly"
                                                                            style="width: 60%;height: 35px;border-radius: 3px;border: none;"
                                                                            id="archiving"
                                                                            value="${reservationsInfo.archiving}"></li>
                                                <li><span>经济能力：</span><select class="select_styles"
                                                                              name="economicAbility"
                                                                              id="economicAbility"></select></li>
                                                <li><span>二级渠道：</span><select class="select_styles1" name="twoChannel"
                                                                              id="twoChannel"></select></li>
                                                <li><span>二级媒介：</span><select class="select_styles" name="twoMedium"
                                                                              id="twoMedium"></select></li>
                                            </ul>
                                        </li>
                                        <li>
                                            <ul>
                                                <li><span>预约时间：</span><input type="text" class="modify" style="pointer-events: none"
                                                                             id="appointmentArrivalTime"
                                                                             value="${reservationsInfo.appointmentArrivalTime}"
                                                                             onfocus="laydate({istiem:true,format:'YYYY-MM-DD hh:mm:ss'})">
                                                </li>
                                                <li><span>障碍点：</span><input type="text" class="modify"
                                                                            id="obstaclePoint"
                                                                            value="${reservationsInfo.obstaclePoint}">
                                                </li>
                                                <li><span>建档时间：</span><input type="text" class="modifyd"
                                                                             id="filingTime"
                                                                             value="${reservationsInfo.filingTime}">
                                                <li><span>三级渠道：</span><select class="select_styles1" name="thrChannel"
                                                                              id="thrChannel"></select></li>
                                                <li><span>三级媒介：</span><select class="select_styles" name="thrMedium"
                                                                              id="thrMedium"></select></li>
                                            </ul>
                                        </li>
                                        <li>
                                            <ul>
                                                <li><span>部门：</span><input type="text" class="modify"
                                                                           id="department"
                                                                           value="${reservationsInfo.department}"
                                                                           onfocus="laydate({istiem:true,format:'YYYY-MM-DD hh:mm:ss'})">
                                                </li>
                                                <li><span>归属人：</span>
                                                    @if(shiro.hasPermission("/reservations/updateBelonger")){
                                                    <input type="text" class="modify" name="belonger" id="belonger1"
                                                           value="${reservationsInfo.belonger}">
                                                    @}
                                                    @if(shiro.hasPermission("/reservations/notupdateBelonger")){
                                                    <input type="text" class="belonger" id="belonger2"
                                                           name="belonger" readonly="readonly" style="border: none"
                                                           value="${reservationsInfo.belonger}">
                                                    @}
                                                </li>
                                            </ul>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-12">
                                    <ul style="padding-left: 10px;">
                                        <li>
                                            <p>备注</p>
                                            <textarea id="remarks" name="remarks" readOnly="readOnly" rows="6"
                                                      style="width: 75%">${reservationsInfo.remarks}</textarea>
                                        </li>
                                        <li style="margin-top: 14px;">
                                            <p>聊天记录</p>
                                            <textarea id="content" name="content" readOnly="readOnly" rows="6"
                                                      style="width: 75%">${reservationsInfo.content}</textarea>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-12">
                                    <div class="btnBox">
                                        @if(shiro.hasPermission("/reservations/supplement")){
                                        <button type="button" class="btn" style="margin-left: 1%"
                                                onclick="ReservationsInfoDlg.supplementSubmit()">保存
                                        </button>
                                        @}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--已到-->
                    <div role="tabpanel" class="tab-pane arrived" id="doctor">
                        <div class="clearfix btnBox">
                            <div style="float: left;">
                                <button type="button" class="btn" onclick="ReservationsInfoDlg.close()">取消</button>
                            </div>
                        </div>
                        <div class="home_box" style="background: #f7f7f7;position: relative">
                            <div style="background: #cccccc;width: 7px;position: absolute;top: 50px;left: 3%;bottom: 0;">
                                    <span class="glyphicon glyphicon-record" style="color:#30add1;
                                    font-size: 4em;margin: -30px 0 0 -21px;"></span>
                            </div>
                            <div style="width: 50%;margin-left: 7%">
                                <#sortDiagnosisDetail  id="sortDiagnosisDetail" list="${consultantInfoList}"/>
                            </div>
                        </div>
                    </div>
                    <div role="tabpanel" class="tab-pane arrived" id="deal">
                        <div class="clearfix btnBox">
                            <div style="float: left;">
                                <button type="button" class="btn" onclick="ReservationsInfoDlg.close()">取消</button>
                            </div>
                        </div>
                        <div class="home_box" style="background: #f7f7f7;position: relative">
                            <div style="background: #cccccc;width: 7px;position: absolute;top: 50px;left: 3%;bottom: 0;">
                                    <span class="glyphicon glyphicon-record" style="color:#30add1;
                                    font-size: 4em;margin: -30px 0 0 -21px;"></span>
                            </div>
                            <div style="width: 50%;margin-left: 7%">
                                <#openBillTimeListss  id="openBillTimeListss" list="${payServiceInfoList}"/>
                            </div>
                        </div>
                    </div>

                    <div role="tabpanel" class="tab-pane notReached" id="returnVisit">
                        <div class="clearfix btnBox">
                            <div style="float: left;">
                                <button type="button" id="cancel" class="btn" onclick="ReservationsInfoDlg.close()">取消</button>
                            </div>
                        </div>
                        <div class="clearfix home_box" style="background: #f7f7f7;padding: 30px 0;position: relative">
                            <div style="background: #cccccc;width: 7px;position: absolute;top: 65px;left: 3%;bottom: 0;">
                                <span class="glyphicon glyphicon-record" style="color:#30add1;
                                font-size: 5em;margin: -38px 0 0 -26px;"></span>
                            </div>
                            <div id="bubble">
                                <div id="further"></div>
                                <div id="isRevisitInfoForm">
                                    <div>
                                        <div style="padding-top: 5px;">
                                            <h4 style="padding-bottom: 10px;">添加回访详情</h4>
                                            <textarea id="revisitContent" name="revisitContent" rows="8" style="width: 95%;border-radius: 3px;"></textarea>
                                        </div>
                                        <ul class="ul_box" style="padding-top: 25px;display: flex" >
                                            <li id="appointmentTimeLi">
                                                <span>预约回访时间</span>
                                                <input style="padding-left: 10px;" type="text"
                                                       class="input_style" id="appointmentTime" name="预约回访时间"
                                                       onclick="laydate({istiem:true,format:'YYYY-MM-DD hh:mm:ss'})">
                                            </li>
                                            <li><span>状态：</span><select class="input_style" name="statuss"
                                                                        onchange="ReservationsInfoDlg.statussChange()" id="statuss">
                                                <option value="预约">预约</option>
                                                <option value="待定">待定</option>
                                                <option value="跟进">跟进</option>
                                                <option value="过期">过期</option>
                                            </select></li>
                                        </ul>
                                    </div>
                                    <div class="btn_box" style="padding-top: 15px;">
                                        <button type="button" class="btn" onclick="IsRevisitInfoDlg.addIsRevisitsdds()">新增</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="${ctxPath}/static/modular/marketing/reservations/reservations_info.js"></script>
<script src="${ctxPath}/static/modular/tcCenter/consultant/is_revisit_info.js"></script>
<script src="${ctxPath}/static/js/common/jsChannel.js"></script>
<script src="${ctxPath}/static/js/common/jsMedium.js"></script>
<script type="text/javascript">
    var oneChanneli = document.getElementById("oneChannelValue").value;
    var twoChanneli = document.getElementById("twoChannelValue").value;
    var thrChanneli = document.getElementById("thrChannelValue").value;
    var oneMediumi = document.getElementById("oneMediumValue").value;
    var twoMediumi = document.getElementById("twoMediumValue").value;
    var thrMediumi = document.getElementById("thrMediumValue").value;
    //初始化下拉渠道列表
    $.post(Feng.ctxPath + "/channel/getChannels", function (data) {
        ChannelList = data;
        channelInit('oneChannel', 'twoChannel', 'thrChannel');
    }, "json");
    //初始化下拉媒介列表
    $.post(Feng.ctxPath + "/medium/getMedium", function (data) {
        MediumList = data;
        mediumInit('oneMedium', 'twoMedium', 'thrMedium');
    }, "json");
    var arr = $("#huifang").val();
    var strs = arr.split(",");
    var str1 = '';
    $(function () {
        for(var i=0;i<strs.length;i++){
            str1 = "<p>"+strs[i]+"</p>";
            if(strs[i] != ""){
                $("#further").append(str1)
            }
        }
    })
</script>
@}